<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <HeadTitle></HeadTitle>
        <div class="container">

            <img src="@/assets/image/404.png" alt="" />

            <van-cell title="用户名" is-link value="" />
        </div>
        <van-cell 
         v-for="item in cellItems"
         :key="item.title"
         :title="item.title"
         :is-link="true"
         @click="handleCellClick(item)"
         :value="item.value"/>
         <!-- 退出登录按钮 -->
         <van-button type="primary" @click="toLogin()">退出登录</van-button>
        <van-popup
        v-model:show="show"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '30%' }"
        
        >
        <van-cell title="退出登录" is-link value="" />
        <!-- 确定退出按钮和取消退出按钮 -->
        <van-button type="danger" @click="yes_login()">确定</van-button>
        <van-button  type="primary"  @click="no_login()">取消</van-button>
        </van-popup>

    </div>
</template>
<script lang='ts' setup>
import HeadTitle from '@/components/HeadTitle.vue';
import { ref } from 'vue';
import router from '@/router';
const show = ref(false);

// 退出登录按钮
const toLogin = () => {
    show.value = true;
};
const yes_login = () => {
    show.value = false;
   // 清除缓存
   sessionStorage.clear();
    localStorage.clear();
    router.push('/login');
};
const no_login = () => {
    show.value = false;
};
// 定义一个数组来存储van-cell的数据
const cellItems = ref([
    { title: '修改密码', value: '',routerItem:"change-password"},
    { title: '清除缓存', value: '10M',routerItem:"clear-cache"},
    { title: '屏幕亮度', value: '',routerItem:"screen-brightness" },
    { title: '版本检测', value: '',routerItem:"version-detection" },
    { title: '帮助中心', value: '',routerItem:"help-center" },
    { title: '关于我们', value: '',routerItem:"about-us" },
    { title: '邀请好友', value: '',routerItem:"invite-friends" }
]);
function handleCellClick(item: { title: string; value: string }) {
    console.log('Clicked cell:', item);
    // 在这里处理点击事件
}




</script>
<style scoped lang="scss">
.container {
    display: flex;
    margin-top: 30px;

    img {
        width: 50px;
        border-radius: 50%;
        height: 50px;

    }
}

.van-cell {
    margin-top: 5px;
}
.van-button{
    margin-top: 10%;
    width: 100%;
}
.van-popup{
    button{
        width: 50%;
        float: left;
    };
}
</style>